<template>
  <div class="containerBox">
    <div class="orderInfo">
      <div class="infoLeft">
        <p class="tit">订单信息</p>
        <p>订单编号 2222222222222222222222</p>
        <p>订单类型 普通订单</p>
        <p>买家昵称 馮寳寳</p>
        <p>付款方式 支付宝：12345678901</p>
        <p class="tit">收货信息</p>
        <p>收货人 馮寳寳</p>
        <p>联系电话 12345678901</p>
        <p>收货地址 杭州市拱墅区花子可行设计创意园2幢608</p>
      </div>
      <div class="infoRight">
        <p class="tit">订单状态：已评价</p>
        <button class="hover" @click="checkLogistics">查看物流</button>
        <button class="hover" @click="checkEvaluate">查看评价</button>
      </div>
    </div>
    <div class="tableList">
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column property="goodsName" label="商品名称"></el-table-column>
        <el-table-column property="goodsUnitPrice" label="单价（元）"></el-table-column>
        <el-table-column property="goodsNumber" label="数量"></el-table-column>
        <el-table-column property="goodsActualPayment" label="实付款（元）"></el-table-column>
        <el-table-column property="goodsSeller" label="卖家"></el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="中通快递"
      :visible.sync="isShowModal"
    >
      <div class="info">
        <p class="time">2018-12-13 8:16:56</p>
        <p>【杭州市】 快件已被 【丰巢的早城】 代收, 如有问题请电联（15958101297 / 4000633333,15958101297）, 感谢使用中通快递, 期待再次为您服务!</p>
      </div>
      <div class="info">
        <p class="time">2018-12-13 8:16:56</p>
        <p>【杭州市】 快件已被 【丰巢的早城】 代收, 如有问题请电联（15958101297 / 4000633333,15958101297）, 感谢使用中通快递, 期待再次为您服务!</p>
      </div>
      <div class="info">
        <p class="time">2018-12-13 8:16:56</p>
        <p>【杭州市】 快件已被 【丰巢的早城】 代收, 如有问题请电联（15958101297 / 4000633333,15958101297）, 感谢使用中通快递, 期待再次为您服务!</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'orderDetails',
  data () {
    return {
      isShowModal: false,
      tableData: [
        {
          goodsName: 'test',
          goodsUnitPrice: '10',
          goodsNumber: 100,
          goodsActualPayment: 1,
          goodsSeller: 'G宠街'
        }
      ]
    }
  },
  methods: {
    checkLogistics () {
      this.isShowModal = true
    },
    checkEvaluate () {
      this.$store.commit('isDetailFn', false)
      console.log(this.$store.state.isDetail)
      this.$router.push({name: 'goodsEvaluate'})
    }
  }
}
</script>

<style scoped lang="less">
  .containerBox .tableList{
    /deep/ .el-table .cell{
      color:#000;
      font-weight: normal;
      text-align:center;
      line-height:25px;
    }
    /deep/ .el-table__body-wrapper tbody tr *{
      font-size:14px;
    }
    /deep/ .el-table__body-wrapper tbody tr td .cell .tagS{
      border:1px solid #c7c7c7;
      padding: 5px;
      margin-bottom: 5px;
      margin-right:5px;
    }
    /deep/ .el-table__body-wrapper tbody tr td .cell a.oper{
      color: #008fff;
    }
    .el-pagination{
      margin-top: 40px;
      text-align: center;
    }
    .pagination /deep/ *{
      font-size: 16px;
    }
  }
  .orderInfo {
    position: relative;
    overflow: hidden;
    div{
      background: #fff;
      width:45%;
      padding:2%;
      border:1px solid #e5e5e5;
      margin-bottom: 20px;
      p{
        padding-left:70px;
        line-height: 30px;
      }
      p.tit{
        padding:0;
      }
      button{
        line-height: 35px;
        padding: 0 10px;
        margin-right: 10px;
        background-color: #20a0ff;
        color: #fff;
        margin-top:10px;
      }
    }
    .infoRight{
      position: absolute;
      top:0;
      right:0;
      bottom: 0;
    }
  }
  .el-dialog{
    div.info{
      margin-bottom:20px;
      p.time{
        margin-bottom: 10px;
        padding:0;
      }
      p{
        padding-left:50px;
      }
    }
  }
</style>
